<%@ taglib prefix="s" uri="/struts-tags" %>
<%--<s:debug />--%>

<style type="text/css" media="screen">
    table#viewTable {
        width: 1000px;
    }

    div.comment_wrapper {
        background-color: #fff;
        margin: 0em;
        padding: 1.5em 0.2em 2.5em 1em;
        clear: both;
    }

    div.comment_head {
        font-size: 80%;
        color: #000;
        padding-top: 0.5em;
        margin-top: 0.3em;
        clear: both;
    }

    div.comment_head span.author {
        background: transparent url("images/user.gif") 0px 1px no-repeat;
        padding: 1px 0px 1px 16px;
    }

    div.comment_head abbr.published {
        background: transparent url("images/date.gif") 0px 1px no-repeat;
        padding: 1px 0px 1px 16px;
    }

    div.comment_body {
        border-bottom: 1px dotted #000;
        width: 930px;
        word-wrap: break-word;
        word-break: normal;
    }

    div.comment_body pre {
        margin: 5px
    }

    div.comment_buttons {
        float: right;
        font-size: 10px;
        cursor: pointer;
        margin-top: -21px;
    }

    div.comment_text {
        padding-top: 0.5em;
        /*width: 100%;*/
    }

    div.comment_form {
        margin-top: 2em;
        margin-right: 1em;
        clear: both;
    }

    .comment_reply_table {
        width: 100%;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #000000;
        background: none;
        font-weight: normal;
        margin: 0;
        padding-top: .5em;
        padding-bottom: .17em;
        border-bottom: 1px solid #aaa;
    }

    div.comment_entries {
        max-height: 150px;
        min-height: 0px;
        /*         height: 200px;
         */
        overflow-y: auto;

    }

    h3 a {
        color: #000000;
        text-decoration: none;
    }

    form#requestViewEditForm .viewProperties {
        width: 98%;
    }

    .opButton {
        width: 120px;
        font-size: 0.8em !important;
    }

    .copyList {
        width: 99.5%;
        height: 100%;
    }

</style>

<form id="requestViewEditForm" method="post">
    <table id="viewTable" border="0">
        <tr>
            <td class="label">Category</td>
            <td>
                <s:textfield id="category" name="category" theme="simple" value="%{req.category.name}"
                             cssClass="viewProperties" disabled="true"/>
                <s:hidden id="viewMode" name="viewMode" theme="simple" value="%{viewMode}"/>
                <s:hidden id="requestId" name="requestId" theme="simple" value="%{req.id}"/>
                <s:hidden id="reqNo" name="reqNo" theme="simple" value="%{req.reqNo}"/>
            </td>
            <td class="label" style="width: 160px;text-align: right">Type</td>
            <td>
                <s:textfield id="type" name="type" theme="simple" value="%{req.type.name}" cssClass="viewProperties"
                             disabled="true"/>
            </td>
        </tr>
        <tr>
            <td class="label">Target Date</td>
            <td>
                <s:date name="req.targetDate" format='yyyy-MM-dd' var="reqTargetDate"/>
                <s:textfield id="commentTargetDate" name="commentTargetDate" theme="simple"
                             value="%{reqTargetDate}" tabindex="-1" cssClass="viewProperties"
                             readonly="%{requests != 'myFollowUp'}" disabled="%{guest}"/>
            </td>
            <td class="label" style="text-align: right">Status</td>
            <td>
                <s:select list="requestStatus" id="status" disabled="%{guest}" theme="simple" value="%{req.status}"
                          cssClass="viewProperties" cssStyle="width: 99%"/>
            </td>
        </tr>

        <tr>
            <td class="label"><s:text name="request.copyList"/></td>
            <td colspan="3" rowspan="3">
                <s:select cssClass="copyList" theme="simple" name="copyList" multiple="true" list="copyList"
                          id="copyList"/>
            </td>
        </tr>
        <tr>
            <td>
                <button class="opButton" type="button"
                        <s:if test="%{guest}">disabled</s:if> id="addCCUser">
                    <s:text name="request.add"/>
                </button>
            </td>
        </tr>
        <tr>
            <td>
                <button class="opButton" type="button"
                        <s:if test="%{guest}">disabled</s:if> id="removeCCUser">
                    <s:text name="request.remove"/>
                </button>
            </td>
        </tr>

        <tr>
            <td colspan="4">
                <hr/>
            </td>
        </tr>

        <s:include value="%{templatePageName + '.jsp'}"/>
        <tr>
            <td id="comments" colspan="4">
                <div class="comment_wrapper">
                    <h3><a id="discussion_section">Comments</a></h3>

                    <div class="level2">
                        <div class="comment_entries"></div>

                        <div class="comment_replies">
                            <div class="comment_form">
                                <h3><a>Add Comment</a></h3>
                                <table border="0" class="comment_reply_table">
                                    <tr>
                                        <td colspan="2" style="text-align: left">
                                            <div class="comment_text">
                                                <textarea class="edit" name="text"
                                                          style="width: 100%; height: 50px"
                                                          <s:if test="%{guest}">disabled</s:if>
                                                          id="discussion__comment_text" tabindex="5"></textarea>

                                                <div id="uploadImageStatus"></div>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>

        <tr>
            <td colspan="4" align='center'>
                <button id="updateRequest" <s:if test="%{guest}">disabled</s:if>>Save</button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button id="cancelChange">Close</button>
            </td>
        </tr>
    </table>
</form>

<script type="text/javascript">
    $(function () {
        <%--var requestForm = $("#requestViewEditForm", "div#tab_<s:property value='req.id'/>");--%>
        //for IE bug fix "#tab_61 #requestViewEditForm #cancelChange" selector not work in IE
        var requestForm = $("div#tab_<s:property value='req.id'/>");


        var dialogId = 'viewRequestDialog';
        var downloadUrl = 'download-attachment?id=';

        var request = <s:property value="requestJSON" escape="false"/>;
//        console.log(request);

        $("#addCCUser", requestForm).button().click(function (e) {
            e.preventDefault();
            console.log("Click addCCUser in view request %o", e);
            global.addCCUserDialog.data("requestFrom", requestForm).dialog("open");
        });

        $("#removeCCUser", requestForm).button().click(function (e) {
            e.preventDefault();
            $('#copyList>option:selected', requestForm).remove();
        });

        var requestId = $("#requestId", requestForm).val();

        /**
         * @param requestId id
         * */
        function refreshViewForm(request, update) {
            var isUpdate = update || true;

            global.updateIncludeAttributes(request);
            //show comments


            var commentsContainer = $("#comments", requestForm);
            var entriesDiv = $("div.comment_entries", requestForm);
            entriesDiv.loadTemplate("templates/comments.html", request.comments, {paged: false})
                    .scrollTop(0);

            $('#discussion__comment_text', requestForm).val('').focus();

            // if this is not update the page, following refresh is unnecessary
            if (!isUpdate) return;
            // update normal form element

            // set editable component in according to view mode
            if (global.VIEW_MODE.FOLLOWUP == $("#viewMode").val()) {
                $("#commentTargetDate", requestForm).datepicker({dateFormat: "yy-mm-dd"});
            }
        }

        refreshViewForm(request);

        var uploadURL = 'upload-image?id=' + requestId,
                editor = $('#discussion__comment_text', requestForm).ckeditor({
                    extraPlugins: 'colorbutton,font,base64image',
                    removePlugins: 'image',
                    filebrowserUploadUrl: uploadURL,
                    filebrowserImageUploadUrl: uploadURL,
                    base64image: {
                        // max base64 image size.
                        // maxFileSize: 1024 * 512
                        upload: false,
                        statusBar: 'uploadImageStatus'
                    }
                });
        $("#updateRequest", requestForm).button().on("click", function (e) {
            e.preventDefault();
            console.log("request is updating..");
            var viewMode = $("#viewMode", requestForm).val();

            //create editor

            var postData = {
                request: requestId,
                newStatus: $('#status', requestForm).val(),
                targetDate: $('#commentTargetDate', requestForm).val(),
                comment: editor.val(),
                copyList: $('#copyList>option', requestForm).map(function (index, option) {
                    return option.value
                }).get()
            };


            $.blockUI();
            $.post('update-request', postData, function (json) {
                if (json.status != 0) {
                    $.unblockUI();
                    $.msgBox(json.message, null, {title: "Error"});
                    return;
                }
                $.post('get-request', {id: requestId}, function (request) {
                    $.unblockUI();
                    refreshViewForm(request);

                    // refresh two request grid
                    $('#requestGrid').trigger('reloadGrid');
                    $('#followupGrid').trigger('reloadGrid');
                });
            });
        });


        $("#cancelChange", requestForm).button().on("click", function (e) {
            e.preventDefault();
            var tabId = 'tab_' + $("#requestId", requestForm).val();
//            console.log("tabId=" + tabId);
            global.closeTab(tabId);
        });
    });
</script>